import Arr1 from '@/assets/arr-1.png';
import Mask1 from '@/assets/mask-1.png';
import Mask2 from '@/assets/mask-2.png';

import VS from '@/assets/vs.png';

import Progress100 from '@/assets/100.png';
import Progress65 from '@/assets/65.png';
import Progress85 from '@/assets/85.png';
import N100 from '@/assets/n100.png';
import N65 from '@/assets/n65.png';
import N85 from '@/assets/n85.png';

import Bg1 from '@/assets/bg-1.png';
import Bg2 from '@/assets/bg-2.png';
import Bg3 from '@/assets/bg-3.jpg';
import Bg4 from '@/assets/bg-4.jpg';
import Bg5 from '@/assets/bg-5.png';
import Bg6 from '@/assets/bg-6.png';

import StartButton1 from '@/assets/button-1.png';

import P1 from '@/assets/p-1.png';
import P2 from '@/assets/p-2.png';
import Search1 from '@/assets/search.png';

import Light0 from '@/assets/light-0.png';
import Light1 from '@/assets/light-1.png';
import Light10 from '@/assets/light-10.png';
import Light11 from '@/assets/light-11.png';
import Light2 from '@/assets/light-2.png';
import Light20 from '@/assets/light-20.png';
import Light21 from '@/assets/light-21.png';
import Light3 from '@/assets/light-3.png';
import Light4 from '@/assets/Light4.png';

import Title1 from '@/assets/title-1.png';
import Title2 from '@/assets/title-2.png';
import Title3 from '@/assets/title-3.png';
import Title4 from '@/assets/title-4.png';
import Title5 from '@/assets/title-5.png';
import Title6 from '@/assets/title-6.png';
import Title7 from '@/assets/title-7.png';

const SwiperImages = [
  '/shop1.jpg?v=1.0.3',
  '/shop2.jpg?v=1.0.3',
  '/shop3.jpg?v=1.0.3',
  '/shop4.jpg?v=1.0.3',
  '/shop5.jpg?v=1.0.3',
  '/shop6.jpg?v=1.0.3',
  '/shop7.jpg?v=1.0.3',
];

import 'swiper/css';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';

import useSvga from '@/hooks/useSvga';
import { getDeviceCode } from '@/utils';
import http from '@/utils/http';
import '@animxyz/core';
import { XyzTransition, XyzTransitionGroup } from '@animxyz/react';
import { useInViewport, useSetState } from 'ahooks';
import dayjs from 'dayjs';
import isMobile from 'is-mobile';
import { useEffect, useRef, useState } from 'react';
import { Loading } from 'react-vant';
import { Autoplay } from 'swiper/modules';

export default function () {
  const isLiveBefore = dayjs().isBefore('2024-07-28 19:00');

  const pRef = useRef<HTMLDivElement>(null);
  const vsRef = useRef<HTMLDivElement>(null);

  const { init, player } = useSvga('/welcome.svga?v=1.0.3', {
    loop: 1,
  });

  // ?VS 时否已经播放过
  const [vsAnimateIsAnimated, setVsAnimateIsAnimated] =
    useState<boolean>(false);

  useEffect(() => {
    init(document.getElementById('pagCanvas') as HTMLCanvasElement).then(() => {
      setPagLoading(true);
      setLights({ light1: true });
      player.current?.start();
    });
  }, []);

  const swiperRef = useRef<SwiperClass>();
  const [inViewport, ratio] = useInViewport(pRef, {
    threshold: [0, 0.25, 0.5, 0.75, 1],
  });

  // ?控制swiper 时否自动播放
  useEffect(() => {
    if (ratio && ratio >= 1 && inViewport) swiperRef.current?.autoplay.start();
    else swiperRef.current?.autoplay.pause();
  }, [inViewport, ratio]);

  const [pagLoading, setPagLoading] = useState<boolean>(false);

  // 灯光控制
  const [lights, setLights] = useSetState<{
    light1: boolean;
  }>({
    light1: false,
  });

  async function handleClickJD() {
    const sid = await getDeviceCode();
    http.post(`/api/event/report`, {
      project: '激浪',
      url: window.location.href,
      sid,
      params: {
        eventName: '点击京东',
      },
      env: 'prod',
    });

    if (isMobile())
      window.location.href = `https://pro.m.jd.com/mall/active/xvGUM3TT6xduE296EbSyuvqo39z/index.html`;
    else
      window.location.href = `https://pro.jd.com/mall/active/xvGUM3TT6xduE296EbSyuvqo39z/index.html`;
  }

  function handleClickLive() {
    if (isLiveBefore) return;
    if (isMobile())
      window.location.href = `https://www.domain.com/page?hyaction=live&uid=1199536199401&is_living=true&use304Cache=1`;
    else window.location.href = `https://www.huya.com/991111`;
  }

  return (
    <>
      <div className="w-[750px] h-[1416px] relative overflow-hidden">
        {/* arr */}
        <i
          className="w-[74px] -ml-[calc(74px/2)] h-[74px] bg-full absolute left-1/2 bottom-[240px] z-20 animate-swiper"
          style={{
            backgroundImage: `url(${Arr1})`,
          }}
        ></i>

        <canvas
          id="pagCanvas"
          className="w-[690px] h-[1200px] absolute left-[30px] top-[50px] object-cover"
        ></canvas>

        {!pagLoading && (
          <div className=" w-full h-full absolute left-0 top-0 flex justify-center items-center">
            <Loading
              type="spinner"
              color="green"
              size={60}
              className=" -mt-[100px]"
            />
          </div>
        )}

        {/* mask */}
        <p
          className=" w-full h-full bg-full"
          style={{
            backgroundImage: `url(${Bg1})`,
            backgroundSize: '100% 100%',
          }}
        ></p>

        {/* 灯 */}
        <div className="w-[732px] h-[1226px] absolute left-[10px] top-[30px]">
          <p
            className=" w-full h-full absolute left-0 top-0 bg-full"
            style={{
              backgroundImage: `url(${Light20})`,
            }}
          />
          {lights.light1 && (
            <XyzTransition
              appear
              appearVisible
              duration="auto"
              xyz="fade iterate-2"
            >
              <p
                className=" w-full h-full absolute left-0 top-0 bg-full"
                style={{
                  backgroundImage: `url(${Light21})`,
                }}
              />
            </XyzTransition>
          )}
        </div>

        {/* progress */}
        <div className="absolute bottom-[40px] left-[80px] z-10 flex items-center">
          <i
            className="w-[461px] h-[66px] bg-full block"
            style={{ backgroundImage: `url(${Progress65})` }}
          />
          <b
            className="w-[138px] h-[92px] bg-full block ml-1"
            style={{
              backgroundImage: `url(${N65})`,
            }}
          />
        </div>

        <p
          className="w-[750px] h-[456px] absolute left-0 top-0 "
          style={{
            backgroundImage: `url(${Mask2})`,
            backgroundSize: '100% 100%',
          }}
        />
      </div>

      {/* *超级能量站 */}
      <div
        className="w-[750px] h-[1557px] relative pt-[100px] -mt-[60px] overflow-hidden"
        ref={vsRef}
        style={{
          backgroundImage: `url(${Bg4})`,
          backgroundSize: '100% 100%',
        }}
      >
        <p className="text-[16px] text-white absolute right-4 bottom-[160px]">
          *奖品数量有限，先到先赢，赢完即止。
        </p>

        {/* mask */}
        <p
          className="w-[750px] h-[468px] absolute left-0 top-0 z-10 -mt-[20px]"
          style={{
            backgroundImage: `url(${Mask1})`,
            backgroundSize: '100% 100%',
          }}
        ></p>

        {/* 灯 */}
        <div className="w-[732px] h-[1416px] absolute left-[10px] top-[20px] z-10">
          <b
            className="w-full h-full absolute left-0 top-0"
            style={{
              backgroundImage: `url(${Light3})`,
              backgroundSize: '100% 100%',
            }}
          ></b>

          {/* 亮灯 */}
          <XyzTransition
            appear
            appearVisible={{
              threshold: 0.9,
            }}
            duration="auto"
            xyz="fade iterate-2"
          >
            <b
              className="w-full h-full absolute left-0 top-0"
              style={{
                backgroundImage: `url(${Light2})`,
                backgroundSize: '100% 100%',
              }}
            ></b>
          </XyzTransition>
        </div>

        <XyzTransitionGroup
          appear
          appearVisible
          duration="auto"
          xyz="fade down-2 stagger-2 delay-3"
        >
          {/* Title */}
          <h1
            className="w-[750px] left-0 h-[239px] absolute top-[70px] bg-full"
            style={{
              backgroundImage: `url(${Title4})`,
            }}
          />

          <h2
            className="w-[624px] -ml-[calc(624px/2)] h-[172px] absolute top-[274px] left-1/2 bg-full"
            style={{
              backgroundImage: `url(${Title6})`,
            }}
          />

          {/* vs */}
          <p
            className=" bg-full w-[750px] h-[372px] absolute left-0 top-[460px]"
            style={{
              backgroundImage: `url(${VS})`,
            }}
          ></p>

          {/* 产品 & 视频 & 图片 */}
          <div
            className="w-[750px] left-0 h-[540px] top-[730px] absolute"
            style={{
              backgroundImage: `url(${Bg5})`,
              backgroundSize: '100% 100%',
            }}
          >
            {/* HAND */}
            {/* {!isLiveBefore && (
              <b
                className="w-16 h-16 absolute right-[160px] top-[300px] z-10 bg-full animate-pulse"
                style={{
                  backgroundImage: `url(${Hand})`,
                }}
              ></b>
            )} */}

            {/* 视频容器 图片容器 */}
            <div
              className="w-[600px] -ml-[300px] h-[316px] absolute left-1/2 top-[108px] z-20 px-[20px] pb-[30px]"
              // onClick={() => handleClickLive()}
            >
              <p
                className="w-[600px] h-[316px] bg-full absolute left-0 top-0"
                style={{
                  backgroundImage: `url(${Light4})`,
                }}
              ></p>

              <video
                onPlay={async () => {
                  const sid = await getDeviceCode();
                  http.post(`/api/event/report`, {
                    project: '激浪',
                    url: window.location.href,
                    sid,
                    params: {
                      eventName: '点击视频播放',
                    },
                    env: 'prod',
                  });
                }}
                src="https://applets-1302975996.cos.ap-nanjing.myqcloud.com/jilang/ning.mp4"
                className=" block w-full h-full relative translate-y-[14px] bg-black"
                playsInline
                controls
              ></video>
            </div>
          </div>

          <h4
            className="w-[454px] -ml-[calc(454px/2)] h-[106px] absolute bottom-[230px] left-1/2"
            style={{
              backgroundImage: `url(${Title5})`,
              backgroundSize: '100% 100%',
            }}
          ></h4>
        </XyzTransitionGroup>

        {/* progress */}
        <div className="absolute bottom-[6px] left-[80px] z-10 flex items-center">
          <i
            className="w-[461px] h-[66px] bg-full block"
            style={{ backgroundImage: `url(${Progress85})` }}
          />
          <b
            className="w-[138px] h-[92px] bg-full block ml-1"
            style={{
              backgroundImage: `url(${N85})`,
            }}
          />
        </div>
      </div>

      {/* *开黑能量站 */}
      <div
        className="w-[750px] h-[1416px] relative overflow-hidden"
        style={{
          backgroundImage: `url(${Bg3})`,
          backgroundSize: '100% 100%',
        }}
      >
        <p className="text-[16px] text-white absolute right-[90px] bottom-[180px]">
          *奖品数量有限，先到先赢，赢完即止。 <br />
          *活动规则详见网鱼电竞官方微博。
        </p>

        {/* 灯管 */}
        <div className="w-[732px] h-[1226px] absolute left-[10px] top-[40px]">
          {/* 灯管 关*/}
          <b
            className="w-full h-full absolute left-0 top-0"
            style={{
              backgroundImage: `url(${Light10})`,
              backgroundSize: '100% 100%',
            }}
          ></b>

          {/* 灯管 开*/}
          <XyzTransition
            appear
            appearVisible={{
              threshold: 0.9,
            }}
            duration="auto"
            xyz="fade iterate-2"
          >
            <b
              className="w-full h-full absolute left-0 top-0"
              style={{
                backgroundImage: `url(${Light11})`,
                backgroundSize: '100% 100%',
              }}
            ></b>
          </XyzTransition>
        </div>

        <XyzTransitionGroup
          appear
          appearVisible
          duration="auto"
          xyz="fade down-2 stagger-2 delay-3"
        >
          {/* Title */}
          <h1
            className="w-[750px] h-[239px] absolute top-[130px] left-0 bg-full z-10"
            style={{
              backgroundImage: `url(${Title1})`,
            }}
          />
          <h2
            className="w-[418px] -ml-[calc(418px/2)] h-[126px] absolute top-[330px] left-1/2 bg-full"
            style={{
              backgroundImage: `url(${Title7})`,
            }}
          />
          <h2
            className="w-[750px] h-[181px] absolute bottom-[330px] left-0 bg-full"
            style={{
              backgroundImage: `url(${Title2})`,
            }}
          >
            {/* <b
              className="w-12 h-12 bg-full absolute right-[100px] top-[40px] animate-pulse"
              style={{
                backgroundImage: `url(${Hand})`,
              }}
             /> */}
          </h2>

          <h3
            className="w-[432px] h-[130px] absolute bottom-[220px] left-[160px]"
            style={{
              backgroundImage: `url(${Title3})`,
              backgroundSize: '100% 100%',
            }}
          ></h3>
        </XyzTransitionGroup>

        {/* !替换区 */}
        <div
          className="w-[570px] h-[300px] bg-black absolute left-[84px] top-[530px] z-20"
          ref={pRef}
        >
          <Swiper
            loop
            modules={[Autoplay]}
            autoplay={{
              delay: 1000,
            }}
            className=" h-full"
            onSwiper={(swiper) => (swiperRef.current = swiper)}
          >
            {SwiperImages?.map((path, index) => (
              <SwiperSlide key={index}>
                <img src={path} className=" block w-full h-full" alt="" />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>

        <b
          className="w-[750px] h-[1308px] absolute left-0 -top-[40px] z-10"
          style={{
            backgroundImage: `url(${Bg6})`,
            backgroundSize: '100% 100%',
          }}
        ></b>

        {/* progress */}
        <div className="absolute bottom-[50px] left-[80px] z-10 flex items-center">
          <i
            className="w-[461px] h-[66px] bg-full block"
            style={{ backgroundImage: `url(${Progress100})` }}
          />
          <b
            className="w-[138px] h-[92px] bg-full block ml-1"
            style={{
              backgroundImage: `url(${N100})`,
            }}
          />
        </div>
      </div>

      <div
        onClick={() => handleClickJD()}
        className="w-[750px] h-[776px] relative pt-[40px] -mt-[40px] overflow-hidden"
        style={{
          backgroundImage: `url(${Bg2})`,
          backgroundSize: '100% 100%',
        }}
      >
        {/* 灯管 */}
        <div className="w-[730px] h-[412px] mx-auto relative">
          <p
            className=" absolute w-full h-full left-0 top-0 bg-full"
            style={{
              backgroundImage: `url(${Light0})`,
            }}
          />
          <XyzTransition
            appear
            appearVisible
            duration="auto"
            xyz="fade iterate-2"
          >
            <p
              className=" absolute w-full h-full left-0 top-0 bg-full"
              style={{
                backgroundImage: `url(${Light1})`,
              }}
            />
          </XyzTransition>
        </div>

        {/* 碎片 */}
        <XyzTransition
          appear
          appearVisible
          duration="auto"
          xyz="fade small-5 delay-2"
        >
          <p
            className="w-[750px] h-[448px] absolute top-0 left-0 bg-full"
            style={{
              backgroundImage: `url(${P2})`,
            }}
          ></p>
        </XyzTransition>

        <XyzTransition
          appear
          appearVisible
          duration="auto"
          xyz="fade small-5 delay-3"
        >
          <p
            className="w-[746px] h-[442px] absolute top-[10px] left-0 bg-full"
            style={{
              backgroundImage: `url(${P1})`,
            }}
          ></p>
        </XyzTransition>

        {/* 京东 */}
        <p
          className="w-[710px] h-[115px] mx-auto mt-[30px] active:scale-95"
          style={{
            backgroundImage: `url(${Search1})`,
            backgroundSize: '100% 100%',
          }}
        ></p>

        {/* start button  */}
        <button
          className="w-[510px] h-[132px] block mx-auto mt-[24px] active:scale-95"
          style={{
            backgroundImage: `url(${StartButton1})`,
            backgroundSize: '100% 100%',
          }}
        ></button>
      </div>
    </>
  );
}
